表の塗りつぶしと文字配置
今週は、ホームページ作成の初心者を対象にホームページの基本を紹介します。テーマは「表の塗りつぶしと文字配置」です。「TABLE」タグを使って作成した表は、セル内を好きな色で塗りつぶすことができます。また、セル内の文字の配置も指定可能です。

→ 表を塗りつぶす
 
表の背景を色で塗りつぶす場合は、「TABLE」「TR」「TD」「TH」タグにbgcolor属性を追加し、RGBの16進数表記や名前で色を指定します。「TABLE」タグにbgcolor属性を追加した場合は表全体、「TR」タグの場合は列全体、「TD」「TH」タグの場合はセルが指定した色で塗りつぶされます。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
■TABLEタグにbgcolorを追加した場合<BR>
<TABLE border="2" width="300" bgcolor="#FF8800">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■TRタグにbgcolorを追加した場合<BR>
<TABLE border="2" width="300">
  <TR bgcolor="#FF8800"><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD&g</TR>
</TABLE>
<BR>
<BR>
■TD、THタグにbgcolorを追加した場合<BR>
<TABLE border="2" width="300">
  <TR><TH bgcolor="Silver">氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD bgcolor="DeepSkyBlue">山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD bgcolor="Tomato">鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD bgcolor="DeepSkyBlue">常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD bgcolor="Tomato">宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD bgcolor="DeepSkyBlue">栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>

</BODY>

</HTML>


→ 表の背景に画像を使用する
 
表では、その背景に画像を配置することも可能です。背景に画像を配置する場合は、「TABLE」「TR」「TD」「TH」タグにbackground属性を追加し、画像ファイル名を指定します。「TABLE」タグにbackground属性を追加した場合は表全体、「TR」タグの場合は列全体、「TD」「TH」タグの場合はセルの背景に画像が配置されます。ただし、Internet Explorerは「TR」タグのbackground属性に対応していません。このため、「TR」タグにbackground属性を追加するのは避けたほうがよいでしょう。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
■TABLEタグにbackgroundを追加した場合<BR>
<TABLE border="2" width="300" background="img01.gif">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD>鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD>宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>
■TD、THタグにbackgroundを追加した場合<BR>
<TABLE border="2" width="300">
  <TR><TH>氏名</TH><TH>学年</TH><TH>担当</TH></TR>
  <TR><TD>山田 健一</TD><TD>3</TD><TD>大道具</TD></TR>
  <TR><TD background="img02.gif">鈴木 康子</TD><TD>2</TD><TD>美術</TD></TR>
  <TR><TD>常盤 真司</TD><TD>1</TD><TD>照明</TD></TR>
  <TR><TD background="img02.gif">宮元 正子</TD><TD>2</TD><TD>衣装</TD></TR>
  <TR><TD>栗田 祐二</TD><TD>3</TD><TD>小道具</TD></TR>
</TABLE>
<BR>
<BR>

</BODY>

</HTML>


→ セル内の文字の配置を指定する
 
通常、セル内の文字は左揃え(「TH」タグの場合は中央揃え)で配置されますが、この文字配置を変更することも可能です。文字の横位置を指定する場合は「TR」「TD」「TH」タグにalign属性を追加し、left(左揃え)、center(中央揃え)、right(右揃え)を指定します。また、valign属性を追加すると文字の縦位置を指定できます。valign属性の値は、top(上揃え)、middle(中央揃え)、bottom(上揃え)で指定します。なお「TABLE」タグにalign属性を追加した場合は、表内の文字ではなく、ページ内における表の配置が変更されます。
<HTML>
<HEAD>
  <TITLE>初めてのホームページ作成</TITLE>
</HEAD>

<BODY>
■align、valignで文字の横位置を指定した場合<BR>
<TABLE border="2" width="400" height="400">
  <TR><TH>属性</TH><TH>値</TH><TH>配置方法</TH></TR>
  <TR><TD>align</TD><TD>left</TD><TD align="left">文字の配置</TD></TR>
  <TR><TD>align</TD><TD>center</TD><TD align="center">文字の配置</TD></TR>
  <TR><TD>align</TD><TD>right</TD><TD align="right">文字の配置</TD></TR>
  <TR><TD>valign</TD><TD>top</TD><TD valign="top">文字の配置</TD></TR>
  <TR><TD>valign</TD><TD>middle</TD><TD valign="middle">文字の配置</TD></TR>
  <TR><TD>valign</TD><TD>bottom</TD><TD valign="bottom">文字の配置</TD></TR>
</TABLE>

</BODY>

</HTML>


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze